.TeacherInfo {
    grid-column: 1;
    grid-row: 2;
    padding: 20px 25%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
    gap: 40px;

    .userInfo {
        grid-row: 1;
        padding: 5% 0;

        header {
            display: flex;
            justify-content: space-between;

            
            button {
                font-size: 16px;
                cursor: pointer;
                transition: all .3s;

                &:hover {
                    color: #5cb3cc;
                }
            }
        }

        ul {
            padding: 30px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: minmax(30px, auto);
            gap: 20px;
            background-color: #fcfcfc;

            .label {
                margin-right: 20px;
            }
        }
    }

    .accountInfo {
        grid-row: 2;
        padding: 5% 0;

        ul {
            padding: 30px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: minmax(30px, auto);
            gap: 20px;
            background-color: #fcfcfc;

            .label {
                margin-right: 20px;
            }

            button {
                font-size: 16px;
                margin-left: 16px;
                transition: all .4s;
                cursor: pointer;

                &:hover {
                    color: #f03752;
                }
            }
        }
    }


    .exit {
        width: 100px;
        height: 36px;
        background-color: #f03752;
        border-radius: 10px;
        margin: auto;
        color: #fcfcfc;
        cursor: pointer;
    }
}